<template>
  <div>
    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />
    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
  </div>
</template>

<script>
  import { getVod } from '@/api/player'
  export default {
    name: "vod",
    asyncData({ params, error }) {
      return getVod(params.id)
        .then(response => {
          return {
            playAuth: response.data,
            vid: params.vid
          }
        })
    },
    mounted() {
      new Aliplayer({
        id: 'J_prismPlayer',
        vid: '99ace5c18f2b480887b4cc02672fefa3',
        playauth: this.playAuth,
        encryptType: '1',
        width: '100%',
        height: '500px',
        cover: 'https://dong-bing-life.oss-cn-beijing.aliyuncs.com/2022-05-03/43246cd8-acb1-4c79-a565-a828aeacf0ac.jpg',
        qualitySort: 'asc',
        mediaType: 'video',
        autoplay: true,
        isLive: false,
        rePlay: false,
        preload: true,
        controlBarVisibility: 'hover',
        useH5Prism: true,
      }, function(player) {
        console.log('播放器创建成功')
      })
    }
  }
</script>

<style scoped>

</style>
